<template>
  <div>
    <van-overlay :show="show">
      <div class="bigBox">
        <div class="centerBox">
          <div id="first">
            <div class="firstBox">
              <p>{{seller.name}}</p>
              <van-rate
                v-model="value"
                :size="40"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </div>
          </div>
          <div id="two">
              <p></p>
              <p>优惠信息</p>
              <p></p>
          </div>
          <div id="threen">
              <p><img :src="require('@/assets/img/decrease_1@2x.png')" alt="">在线支付满28减5,满50减10</p>
              <p><img :src="require('@/assets/img/discount_1@2x.png')" alt="">单人精彩赛</p>
              <p><img :src="require('@/assets/img/discount_1@2x.png')" alt="">清肺雪梨汤8折抢购</p>
              <p><img :src="require('@/assets/img/special_3@2x.png')" alt="">特价饮品八折抢购</p>
              <p><img :src="require('@/assets/img/special_3@2x.png')" alt="">单人特色套餐</p>
          </div>
           <div id="two">
              <p></p>
              <p>商家公告</p>
              <p></p>
          </div>
          <div id="five">
              粥品香坊其烹饪粥料的秘方源于中国千年古法,在融和现代制作工艺,由世界烹饪大师
              屈浩先生领衔研发。坚守纯天然,0添加的良心品质深的消费者青睐,发展至今成为粥类
              引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。
          </div>
          <van-icon name="cross" @click="close" />
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
export default {
  props: ["show", "seller"],
  data() {
    return {
      value: 4,
    };
  },
    methods:{
        close(){
            this.$emit("close")
        }
    }
};
</script>
<style lang="scss" scoped>
.bigBox {
  width: 100%;
  height: 100%;
  padding: 128px 72px 64px;
  .centerBox {
      position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    #first {
      width: 100%;
      height: 118px;
      margin-bottom: 56px;
      display: flex;
      justify-content: center;
      .firstBox {
        width: 376px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        p {
          font-size: 32px;
          font-weight: 700;
          color: white;
        }
      }
    }
    #two{
        width: 100%;
        height: 28px;
        border: 1px solid #000;
        margin-bottom: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p{
            &:nth-of-type(1),&:nth-of-type(3){
                width: 224px;
                height: 2px;
                background: #61676d;
            }
            &:nth-of-type(2){
                font-size: 28px;
                font-weight: 700;
                color: white;
            }
        }
    }
    #threen{
        margin-bottom: 56px;
        width: 100%;
        height: 258px;
        padding-left: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        p{
            font-size: 26px;
            color: white;
            font-weight: 200px;
            display: flex;
            align-items: center;
            img{
                margin-right: 12px;
                width: 32px;
                height: 32px;
            }
        }
    }
    #five{
        width: 100%;
        height: 220px;
        font-size: 26px;
        color: white;
        font-weight: 200;
        padding:0 24px ;
        line-height: 46px;
    
    }
    .van-icon{
        position: absolute;
        bottom: 64px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 60px;
        color: #93979c;
    }
  }
}
.van-rate{
    width: 22em;
    display: flex;
    justify-content: space-between;
}

</style>